// 中间画布排版
import React, { useState } from 'react';
import './DesignCenter.css'; 

const DesignCenter: React.FC = () => {
//  使用 React 的 useState 来管理三个状态：elements（存储当前所有文本框的信息）、clipboard（存储剪贴板文本）、contextMenu（存储右键菜单的位置信息（x 和 y）及关联的元素 id）。
  const [elements, setElements] = useState<{ id: number; text: string; x: number; y: number }[]>([]);
  const [clipboard, setClipboard] = useState<string>('');
  const [contextMenu, setContextMenu] = useState<{ x: number; y: number; id: number } | null>(null);


//  handleDrop: 当用户在画布上放下文本时触发。它会计算文本框的位置，并创建一个新的文本框元素添加到 elements 数组中。
  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault(); // 防止默认事件
    const src = event.dataTransfer.getData('text/plain'); // 获取拖放的文本
    const rect = event.currentTarget.getBoundingClientRect(); // 获取当前元素的边界矩形
    const x = event.clientX - rect.left; // 计算x坐标
    const y = event.clientY - rect.top; // 计算y坐标

    // 创建新的元素对象将其添加到组件的 elements 状态数组中，这样它就可以在画布上渲染出来
    const newElement = {
      id: elements.length, // 使用当前元素数组长度作为新元素的ID
      text: "双击编辑文字", // 默认文本
      x, // x坐标
      y // y坐标
    };
    // 更新元素数组
    setElements((prev) => [...prev, newElement]);
  };

  // 阻止默认的拖动事件，允许 handleDrop 事件触发。
  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault(); // 防止默认事件
  };

  
  // handleContextMenu 在用户右键点击文本框时触发，用于显示自定义的上下文菜单，并阻止默认的浏览器右键菜单。
  const handleContextMenu = (event: React.MouseEvent<HTMLInputElement>, id: number) => {
    event.preventDefault(); // 防止默认右键菜单
    setContextMenu({ x: event.clientX, y: event.clientY, id }); // 更新右键菜单位置和对应元素ID
  };

  // 处理输入框内容变化 文本框是可编辑的，用户可以双击文本框选择内容并直接编辑。当文本框内容发生变化时触发，用于更新 elements 数组中对应元素的文本
  const handleInputChange = (id: number, text: string) => {
    setElements((prev) =>
      prev.map((el) => (el.id === id ? { ...el, text } : el)) // 更新指定ID的元素文本
    );
  };

  //当用户点击右键菜单中的“剪切”时触发，将选中的文本框内容复制到剪贴板，并从画布上移除该文本框。
  const handleCut = () => {
    if (contextMenu) {
      const element = elements.find(el => el.id === contextMenu.id); // 查找对应ID的元素
      if (element) {
        setClipboard(element.text); // 将元素文本存入剪贴板
        setElements((prev) => prev.filter(el => el.id !== contextMenu.id)); // 从元素数组中删除该元素
      }
      setContextMenu(null); // 清除右键菜单
    }
  };

  // 当用户点击右键菜单中的“复制”时触发，将选中的文本框内容复制到剪贴板。
  const handleCopy = () => {
    if (contextMenu) {
      const element = elements.find(el => el.id === contextMenu.id); // 查找对应ID的元素
      if (element) {
        setClipboard(element.text); // 将元素文本存入剪贴板
      }
      setContextMenu(null); // 清除右键菜单
    }
  };

  // 当用户点击右键菜单中的“粘贴”时触发，在画布上创建一个新的文本框，内容为剪贴板中的文本。
  const handlePaste = () => {
    if (contextMenu) {
      const rect = document.querySelector('.canvas')?.getBoundingClientRect(); // 获取画布边界
      const x = contextMenu.x - (rect ? rect.left : 0); // 计算粘贴时的x坐标
      const y = contextMenu.y - (rect ? rect.top : 0); // 计算粘贴时的y坐标
      const newElement = {
        id: elements.length, // 使用当前元素数组长度作为新元素的ID
        text: clipboard, // 从剪贴板获取文本
        x, // x坐标
        y // y坐标
      };
      setElements((prev) => [...prev, newElement]); // 更新元素数组，添加新元素
      setContextMenu(null); // 清除右键菜单
    }
  };

  return (
    <div 
      className='canvas' 
      onDrop={handleDrop} 
      onDragOver={handleDragOver}
    >
     {/* 使用 map 方法遍历 elements 数组，为每个元素渲染一个绝对定位的 div,动态渲染每个文本框，其中包含一个可编辑的 input 元素。 */}
      {elements.map((element) => (
        <div 
          key={element.id} 
          style={{ position: 'absolute', left: element.x, top: element.y }} // 设置元素位置
        >
          <input 
            type="text" 
            className="editable-input" 
            value={element.text} 
            onChange={(e) => handleInputChange(element.id, e.target.value)} // 更新输入框内容
            onDoubleClick={(e) => e.currentTarget.select()} // 双击时选中输入框内容
            onContextMenu={(e) => handleContextMenu(e, element.id)} // 右键菜单事件
          />
        </div>
      ))}

      {/* 如果 contextMenu 状态不为 null，则在指定的位置渲染一个自定义的上下文菜单，包含“剪切”、“复制”和“粘贴”选项。 */}
      {contextMenu && (
        <ul 
          className="context-menu" 
          style={{ position: 'absolute', top: contextMenu.y, left: contextMenu.x }} // 设置右键菜单位置
        >
          <li onClick={handleCut}>剪切</li>
          <li onClick={handleCopy}>复制</li>
          <li onClick={handlePaste}>粘贴</li>
        </ul>
      )}
    </div>
  );
}

export default DesignCenter;
